<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-12-25 11:03:58
 * @LastEditors: 嗷嗷呟 2791877973@qq.com
 * @LastEditTime: 2024-01-04 18:40:49
 * @FilePath: \web课堂\ShiXun1\vue-admin-main\src\views\Car\CarArea\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="card-container">
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="List" :default-sort = "{prop: 'freeDuration', order: 'descending'}">
        <el-table-column type="index" label="序号" />
        <el-table-column label="计费规则名称" prop="ruleName" sortable />
        <el-table-column label="计费规则编号" prop="ruleNumber" sortable />
        <el-table-column label="免费时间(分钟)" prop="freeDuration" sortable/>
        <el-table-column label="收费上限(元)" prop="chargeCeiling" sortable />
        <el-table-column label="计费方式" prop="chargeType" :formatter="formatStatus" sortable />
        <el-table-column label="计费详情" prop="ruleNameView" sortable />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini"  @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination layout="total, sizes,prev, pager, next" :page-sizes="[2, 4, 6, 8]" :page-size="params.pageSize"
        :total="total" @current-change="pageChange" @size-change="sizeChange" :current-page="params.page" />
    </div>
  </div>
</template>
<script>
import { addRuleAPI, delRuleAPI, getRuleAPI, editRuleAPI, getRuleListAPI } from '@/api/rule'
export default {
  data() {
    return {
      // 请求参数
      params: {
        page: 1,
        pageSize: 6,
      },
      total: 0,
      List: [],
      DialogVisible: false,
      formAdd: {
      },
      Rules: {
      },
    }
  },
  mounted() {
    this.getRuleList()
  },
  methods: {
    async getRuleList() {
      const res = await getRuleListAPI(this.params)
      this.List = res.data.rows
      this.total = res.data.total
    },
    pageChange(page) {
      // 把点击的页数赋值给请求参数页数
      this.params.page = page
      // 使用最新的请求参数获取列表数据
      this.getRuleList()
    },
    sizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getRuleList()
    },
    add() {
      this.$router.push('/addRule')
    },
    del(id) {
      this.$confirm("是否删除，将会永久删除该规则", {
      }).then(
        async () => {
          await delRuleAPI(id).then(() => {
            if (this.List.length === 1) {
              this.params.page--
            }
            this.$message.success("删除成功")
            this.getRuleList()
          }).catch((error) => {
            this.$message.error(error.response.data.msg)
          })
        }
      )
    },
    edit(id) {
      this.$router.push('/addRule?id=' + id)
    },
    formatStatus(row) {
      const MAP = {
        partition: '分段收费',
        duration: '时长收费',
        turn:"按次收费"
      }
      return MAP[row.chargeType]
    },
  }

}
</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}


.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>

